<template>
    <div class="container">
        <div class="header">
            <div class="friendName-header">
                {{ props.friendName }}
            </div>
            
        </div>
        <!-- <div ref="chatcontent" class="chatcontent">
            <RecordItem v-for="item in chatRecords" :record="item"></RecordItem>
        </div> -->
        <chatcontentBox :chat-records="props.chatRecords"></chatcontentBox>
        <div  class="inputbox">
            <div class="btns">
                <div @click="videochat" class="topbtn">
                    <img style="height: 30px;" src="video.png"/>
                </div>
            </div>
            <div>
                <!-- <input style="outline:none" @blur="update=true" @focus="update=false" @keypress="onKeyPress" v-model="msg" /> -->
                <div ref="ipt" class="inputContent" @blur="update=true" @focus="update=false" @keypress="onKeyPress" contenteditable="true"></div>
            </div>
            <div style="display: flex;flex-direction: row;">
                <!-- <button @click="sendMessage">send</button> -->
                <div class="btn" @click="sendMessage">发送(S)</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import type { ChatRecord } from '@/types';
import RecordItem from '@/components/small/RecordItem.vue'
import chatcontentBox from '@/components/content/small/chatContentBox.vue'
import { onMounted, ref ,watch,onUpdated} from 'vue';
import { useLoginUserStore } from '@/stores/loginUser';
import ChatUserApi from '@/api/chatUser'
import bus from '@/bus'

const props = defineProps<{
    friendName:string,
    relationshipId:string
    chatRecords:Array<ChatRecord>
}>()
const emit = defineEmits<{
    (ev:'sendMessage',record:ChatRecord):void
}>()
const loginUserStore = useLoginUserStore()
// const chatcontent = ref<HTMLDivElement>()
const ipt = ref<HTMLDivElement>()
const update = ref(true)

// const changeScroll = () => {
//     setTimeout(() => {
//         const div = chatcontent.value as HTMLDivElement
//         div.scrollTop = div.scrollHeight
//     }, 20);

// }
// onUpdated(() => {
//     if(update.value){
//         changeScroll()
//     }
// })
onMounted(() => {
    ipt.value?.addEventListener('paste', e => {
        const items = e.clipboardData?.items as DataTransferItemList
        for (let index = 0; index < items.length; index++) {
            const element = items[index].getAsFile();
            const reader = new FileReader()

            reader.onload = (e) => {
                var image = document.createElement('img')
                image.src = e.target?.result as string
                image.style.height='300px'
                image.style.maxWidth='300px';
                image.loading='lazy'
                ipt.value?.appendChild(image)
            }
            reader.readAsDataURL(element as Blob)
        }
    })
})
const onKeyPress = (e:any   ) => {
    if(e.code == 'Enter') {
        sendMessage()
    }
}


const msg = ref('')


const sendMessage= () => {
    const input = ipt.value as HTMLDivElement
    msg.value = input.innerHTML

    // if contains img 
    // 
    const chatRecord:ChatRecord = {
                relationshipId:props.relationshipId,
                from: loginUserStore.getUserName() as string,
                to: props.friendName,
                type: 'not support',
                content: msg.value
            }
    if(msg.value.includes('<img ')) {
        ChatUserApi.preHandleIMG(chatRecord).then(res => {
            ChatUserApi.sendMessage(res.data.chatRecord)
            emit('sendMessage',res.data.chatRecord)
        })
    }else {
        ChatUserApi.sendMessage(chatRecord)
        emit('sendMessage',chatRecord)
    }
    setTimeout(() => {
                    input.innerText = ''
    }, 20);
}
const handleMsg = () => {
    const parts:string[] = msg.value.split('<img ')
    let final = ''
    parts.forEach(x => {
        if(x.startsWith('src=')) {
            final += '<img style=\' height:300px\' ' + x;
        }else {
            final += x
        }
    })
    msg.value = final
}
const videochat = () => {
    //1.查看是否在线
    bus.emit('startOnline',props.friendName)
    //发起邀请请求

    //请求video 初始化 WebRTC

}

const handleInvite = () => {

}

</script>
<style scoped>
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.header{
    height: 80px;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    /* box-shadow: 0 0 3px; */
    background-color: rgb(245, 245, 245)
}
.inputbox{
    flex: 1;
    background-color: rgb(245, 245, 245)
}
.btns {
    height: 35px;
    width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.topbtn {
    height: 35px;
    width: 35px;
    cursor: pointer;
    margin-left: 20px;
}
.inputContent {
    outline:none;
    width: 700px;
    height: 134px;
    margin: 0 auto;
    overflow: auto;
}
.btn {
    height: 40px;
    width: 130px;
    background-color: rgb(233, 233, 233);
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: rgb(92, 172, 124);
    cursor: pointer;
    border-radius: 5px;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 15px;
}
.btn:hover{
    background-color: rgb(210, 210, 210);
}
.btn img{
   max-width: 30px;
}
.friendName-header {
    font-size: 30px;
    height: 35px;
    margin-top: 20px;
    margin-left: 10px;
}

</style>